<script setup>
import {ref} from "vue";

import breadcrumb from "@/views/head/breadCrumb.vue"

const roleName = ref("")


const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-08',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-06',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-07',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
]
</script>

<template>
<!-- 顶部导航栏 -->
  <breadcrumb></breadcrumb>
    <!-- <div>
    <el-row>
        <el-col>
            角色名称 <el-input  v-model="input" placeholder="请输入内容"></el-input>
            <el-col> <el-button type="primary">搜索</el-button> 
            <el-button>重置</el-button> </el-col>
        </el-col>
    </el-row>
  </div> -->

  <div class="div1">
<el-form ref="from" label-width="80px">
   <el-form-item label="角色名称">
       <el-input v-model="roleName" placeholder="角色名称"></el-input>
   </el-form-item>
   <el-col> 
    <!-- <el-button type="primary" class="ss1">搜索</el-button>  -->
    <el-row :gutter="20">
        <el-col span="8">
            <el-button type="primary" icon="Search">搜索</el-button>
            <el-button icon="refresh">重置</el-button>
        </el-col>
    </el-row>
</el-col>

</el-form>
</div>

<div class="div2">
    <el-button type="success" icon="plus" @click="handleAdd"> 添加</el-button>
    <el-button>批量删除</el-button>
</div>


<div class="div3">
  <!-- 卡片视图区域 -->
  <el-card>
    
    <!-- 用户列表区域  -->
    <el-table
    ref="multipleTableRef"
    :data="tableData"
    style="width: 100%"
    @selection-change="handleSelectionChange"
  >
    <el-table-column type="selection" width="55" />
    <el-table-column label="序号" width="120">
      <template #default="scope">{{ scope.row.date }}</template>
    </el-table-column>
    <el-table-column property="name" label="角色名称" width="120" />
    <el-table-column property="address" label="角色编码" />
    <el-table-column property="address" label="创建时间" />
    <el-table-column property="address" label="操作" >
      <el-tooltip content="修改" placement="top">
            <el-button type="primary" icon="edit" circle ></el-button>
        </el-tooltip>
        <el-tooltip content="删除" placement="top">
            <el-button type="danger" icon="delete" @click="confirmDel = true" circle></el-button>  
        </el-tooltip>
        <el-tooltip content="分配人员" placement="top">
            <el-button type="warning" icon="user" circle></el-button>  
        </el-tooltip>
    </el-table-column>
  </el-table>
  </el-card>
  </div>


<div class="pagination-container">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="[5, 10, 20, 30,40,50,100]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="5">
    </el-pagination>


</div>
  
</template>

<style scoped>
.div1{
    padding: 10px;
    border: 1px solid rgb(223, 223, 223);
    /* border-radius:5px; */
}
.div2{
    margin-top: 5px;
    padding: 10px;
    border: 1px solid rgb(223, 223, 223);
    /* border-radius:5px; */
}
.a{
    width: 90px;
}
.ss1{
    width: 90px
}
.cz1{
    width: 90px
}
.div3{
  margin-top: 10px
}

.pagination-container {
  margin-top: 10px;
  display: flex;
  justify-content: center;
}
</style>
